<template>
    <dl class="block" :class="orderRank == 2 ? 'block-1':''">
        <dt class="top">
            <div class="cover">
                <img class="top-img" :src="rankImg" :alt="name">
                <router-link :to="routePath" class="mask" :title="name"></router-link>
            </div>
            <div class="tit">
                <router-link :to="routePath">
                    <h3 class="f-thide">{{ name }}</h3>
                </router-link>
                <div class="btn">
                    <a href="javascript:;" class="play">播放</a>
                    <a href="javascript:;" class="collect">收藏</a>
                </div>
            </div>

        </dt>
        <dd class="bottom">

            <ul>
                <li v-for="(song, index) in songs" key="index">
                    <span class="order" :class="index <= 2 ? 'order-top' : ''">{{ index + 1 }}</span>
                    <router-link :to="song.songRoute" class="song-name">{{ song.songName }}</router-link>
                    <div class="oper">
                        <a title="播放" class="play2" href="javascript:;"></a>
                        <a href="javascript:;" class="add-play-list" title="添加到播放列表"></a>
                        <a href="javascript:;" class="collect2" title="收藏"></a>
                    </div>
                </li>

            </ul>

            <div class="more">
                <a href="/discover/toplist?id=19723756">查看全部></a>
            </div>
        </dd>
    </dl>

</template>
<script setup>
defineProps({
    "name": String,
    "rankImg": String,
    "routePath": String,
    "songs": Array,
    "orderRank": Number
})
</script>

<style lang="scss" scoped>

.block {
    float: left;
    width: 230px;


    
    .top {
        height: 100px;
        padding: 20px 0 0 19px;

        .cover {
            float: left;
            width: 80px;
            height: 80px;
            position: relative;

            .top-img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .mask {
                background-position: -145px -57px;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        .tit {

            float: left;
            width: 116px;
            margin: 6px 0 0 10px;

            a {
                h3 {
                    font-size: 14px;
                }
            }

            .btn {
                margin-top: 10px;

                a {
                    display: block;
                    float: left;
                    width: 22px;
                    height: 22px;
                    margin-right: 10px;
                    text-indent: -9999px;
                }

                .play {

                    background-position: -267px -205px;

                    &:hover {
                        background-position: -267px -235px;
                    }
                }

                .collect {
                    background-position: -300px -205px;

                    &:hover {
                        background-position: -300px -235px;
                    }
                }


            }
        }


    }

    .bottom {
        ul {
            height: 319px;
            margin-left: 50px;
            line-height: 32px;

            li {
                height: 32px;

                * {
                    vertical-align: middle;
                }

                &:hover .oper{
                        display: block;
                    }

                .order {


                    float: left;
                    position: relative;
                    width: 35px;
                    height: 32px;
                    margin-left: -35px;
                    text-align: center;
                    font-size: 16px;
                    color: #666;


                }

                .order-top {
                    color: #C10D0C;
                }

                .song-name {
                    float: left;
                    width: 96px;
                    height: 32px;
                    color: #000;

                }

                

                .oper {

                    display: none;
                    float: right;
                    width: 82px;
                    margin-top: 7px;                 

                    a {
                        float: left;
                        width: 17px;
                        height: 17px;
                        margin-right: 10px;
                    }

                    .play2 {
                        background-position: -267px -268px;

                        &:hover {
                            background-position: -267px -288px;
                        }
                    }

                    .add-play-list {
                        margin: 2px 6px 0 0;
                        overflow: hidden;
                        display: inline-block;
                        width: 13px;
                        height: 13px;
                        background-position: 0 -700px;

                        &:hover {
                            background-position: -22px -700px;
                        }
                    }

                    .collect2 {
                        background-position: -297px -268px;

                        &:hover {
                            background-position: -297px -288px;
                        }
                    }
                }
            }
        }

        .more {
            clear: both;
            height: 32px;
            margin-right: 32px;
            text-align: right;
            line-height: 32px;
        }
    }


}

.block-1{
    width: 228px;
}
</style>
